const gulp = require('gulp');
const pug = require('gulp-pug');
const data = require('gulp-data');
const fs = require('fs');
const path = require('path');
const webserver = require('gulp-webserver');

// 获取与 Pug 模板相同的 .mock 文件中的数据
function getDataForFile(file) {
    const filePath = path.join(path.dirname(file.path), path.basename(file.path, '.pug') + '.mock');
    if (fs.existsSync(filePath)) {
        return JSON.parse(fs.readFileSync(filePath, 'utf8'));
    }
    return {};
}

// 编译 Pug 模板任务
gulp.task('pug', function() {
    return gulp.src('src/templates/**/*.pug')
    .pipe(data(getDataForFile))
    .pipe(pug())
    .pipe(gulp.dest('dist'));
});

// 将编译好的模板放到 index.html 中（例如作为布局或集成）
gulp.task('build', gulp.series('pug', function() {
    // 可以根据你的实际HTML需要进行进一步处理, 假设将dist中的文件作为部分集成
    return gulp.src('src/index.html') // 假设有个主 index.html 作为模板
    .pipe(gulp.dest('dist'));
}));

// 启动开发服务器用于调试组件
gulp.task('serve', function() {
    return gulp.src('dist')
    .pipe(webserver({
        livereload: true,
        open: true,
        port: 3030
    }));
});

// 观察任务 - 自动重新编译和刷新
gulp.task('watch', function() {
    gulp.watch('src/templates/**/*.pug', gulp.series('build'));
    gulp.watch('src/index.html', gulp.series('build'));
});

// 默认任务
gulp.task('default', gulp.series('build', gulp.parallel('watch', 'serve')));